<template>
  <div class="m-ring-chart">
    <div class="m-ring-chart__content">
      <dv-active-ring-chart
        v-if="showPageFlag && !loading"
        :config="realConfig"
        style="width: 240px; height: 240px"
      />

      <div v-if="loading" class="loading">
        <dv-loading>Loading...</dv-loading>
      </div>
    </div>
    <div class="title" v-html="props.title"></div>
  </div>
</template>

<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue'

const defaultConfig = {
  radius: '65%',
  activeRadius: '75%',
  lineWidth: 25,
  digitalFlopStyle: {
    fontSize: 18
  },
  showOriginValue: true
}

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  config: {
    type: Object,
    default: () => {
      return {}
    }
  },
  cols: {
    type: Array,
    default: () => {
      return []
      // [{ name: 'ttt', property: 'xxx', value: 9999 }, ...]
    }
  },
  datas: {
    type: Object,
    default: () => {
      return {}
      // { 'xxx': 999, 'yyy': 888, ... }
    }
  },
  showOriginValue: {
    // 是否显示数值 true-是 false-否<显示百分号>
    type: Boolean,
    default: true
  },
  color: {
    type: Array,
    default: () => {
      return ['rgb(0, 191, 255)', 'rgb(255, 79, 71)']
    }
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 监听 全屏 变化，刷新视图层
const showPageFlag = ref(true)
const realConfig = ref({})

function setConfig() {
  let c = defaultConfig
  if (Object.keys(props.config).length) {
    c = Object.assign(defaultConfig, props.config)
  } else {
    // 全为0时，要传[]，否则报错
    const datas = props.datas?._value || props.datas
    const cols = props.cols?._value || props.cols
    let list = cols.map((r) => {
      const { property } = r
      const val = datas[property] || 0
      r.value = val
      return r
    })
    c.data = list.every((r) => !r.value) ? [] : list
  }
  c.showOriginValue = props.showOriginValue
  c.color = props.color
  return c
}

function refreshPage() {
  showPageFlag.value = false
  realConfig.value = setConfig()
  setTimeout(() => {
    showPageFlag.value = true
  })
}
watch(() => props.config, refreshPage)
watch(() => props.cols, refreshPage)
watch(() => props.datas, refreshPage)

onBeforeMount(() => {
  realConfig.value = setConfig()
})
</script>

<style lang="less" scoped>
.m-ring-chart {
  padding: 10px;
  .m-ring-chart__content {
    display: flex;
    align-items: center;
    justify-content: center;
    .loading {
      width: 240px;
      height: 240px;
      ::v-deep(.dv-loading) {
        .loading-tip {
          color: #35a3b6;
        }
      }
    }
  }
  .title {
    padding: 5px;
    line-height: 1;
    font-size: 22px;
    text-align: center;
    color: aqua;
    font-weight: 700;
    font-family: serif;
  }
}
</style>
